/*
  1. 切换功能
    1.1 给 注册盒子里面的 a 注册事件
    1.2 将注册的盒子隐藏 将登录的盒子显示 
    1.3 给 登录盒子里面的 a 注册事件
    1.2 将登录的盒子隐藏 将注册的盒子显示 
*/

document.querySelector('.goLogin').addEventListener('click', function () {
  document.querySelector('.register').style.display = 'none'
  document.querySelector('.login').style.display = 'block'
})


document.querySelector('.goRegister').addEventListener('click', function () {
  document.querySelector('.register').style.display = 'block'
  document.querySelector('.login').style.display = 'none'
})

/*
  2. 注册功能
    2.1 需要找到注册盒子里面的 form 标签 注册submit事件
    2.2 阻止表单的默认行为
    2.3 非空判断
    2.4 正则判断
    2.5 发送ajax 
    2.6 注册成功切换登录的盒子 模拟点击 a 标签即可
*/

// 2.1 需要找到注册盒子里面的 form 标签 注册submit事件
document.querySelector('.register form').addEventListener('submit', function (e) {
  // 2.2 阻止表单的默认行为
  e.preventDefault()
  // const username = document.querySelector()
  // 2.3 非空判断
  const username = this.querySelector('[name="username"]').value.trim()
  const password = this.querySelector('[name="password"]').value.trim()
  // if (username.length === 0 || password.length === 0) return Toast.info('输入框数据不能为空')
  // 利用数组 some 方法 

  const inputList = this.querySelectorAll('input')
  // 将 inputList 伪数组 转换为真数组
  // Array.from(inputList).some(item => {
  //   console.log(item.value.trim().length === 0)
  // })
  if (Array.from(inputList).some(item => item.value.trim().length === 0)) return Toast.info('输入框数据不能为空')

  // 2.4 正则判断
  const userReg = /^\w{2,15}$/
  const pwdReg = /^\w{6,15}$/
  if (!userReg.test(username)) return Toast.info('用户名不符合规则')
  if (!pwdReg.test(password)) return Toast.info('密码不符合规则')
  // 2.5 发送ajax 
  axios({
    url: '/api/register',
    method: 'post',
    data: {
      username,
      password
    }
  }).then(({ data: res }) => {
    // console.log(res)
    if (res.code !== 0) return Toast.fail(res.message)
    Toast.success(res.message)
    this.querySelector('a').click()
  })
})


/*
  3. 登录功能
    3.1 需要找到登录盒子里面的 form 标签 注册submit事件
    3.2 阻止表单的默认行为
    3.3 非空判断
    3.4 正则判断
    3.5 发送ajax 
    3.6 登录成功需要跳转到后台首页
*/

// 2.1 需要找到注册盒子里面的 form 标签 注册submit事件
document.querySelector('.login form').addEventListener('submit', function (e) {
  // 2.2 阻止表单的默认行为
  e.preventDefault()
  // const username = document.querySelector()
  // 2.3 非空判断
  const username = this.querySelector('[name="username"]').value.trim()
  const password = this.querySelector('[name="password"]').value.trim()
  // if (username.length === 0 || password.length === 0) return Toast.info('输入框数据不能为空')
  // 利用数组 some 方法 

  const inputList = this.querySelectorAll('input')
  // 将 inputList 伪数组 转换为真数组
  // Array.from(inputList).some(item => {
  //   console.log(item.value.trim().length === 0)
  // })
  if (Array.from(inputList).some(item => item.value.trim().length === 0)) return Toast.info('输入框数据不能为空')

  // 2.4 正则判断
  const userReg = /^\w{2,15}$/
  const pwdReg = /^\w{6,15}$/
  if (!userReg.test(username)) return Toast.info('用户名不符合规则')
  if (!pwdReg.test(password)) return Toast.info('密码不符合规则')
  // 2.5 发送ajax 
  axios({
    url: '/api/login',
    method: 'post',
    data: {
      username,
      password
    }
  }).then(({ data: res }) => {
    console.log(res)
    if (res.code !== 0) return Toast.fail(res.message)
    Toast.success(res.message)
    location.href = './index.html'
    // 将服务器响应回来的 token 字符串保存到 本地存储
    localStorage.setItem('CMSTOKEN', res.token)
    // this.querySelector('a').click()
  })
})
